<template>
  <div class="case-detail">
    <div class="container">
      <div v-if="loading" class="loading">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <div v-else>
        <div class="case-title">
          <h1>{{ info.title || '' }}</h1>
        </div>

        <div class="case-content">
          <div class="details" v-if="info.content">
            <div v-html="info.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { caseDetail } from "@/api/case";
const route = useRoute();
const info = ref<any>({}); // 详情数据
const loading = ref(false); // 加载状态

onMounted(() => {
  getCaseDetail(route.query.id);
});

watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      getCaseDetail(newId);
    }
  },
  { immediate: false }
);

// 获取项目案例详情
const getCaseDetail = (id: any) => {
  if (!id) return;
  loading.value = true;
  info.value = {};
  caseDetail(id)
    .then((res: any) => {
      if (res.code === 200) {
        info.value = res.data;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>

<style lang="scss" scoped>
.case-detail {
  min-height: 100vh;
  padding: 100px 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #9bc0e8 100%);
}

.case-title {
  text-align: center;
  margin-bottom: 60px;
}

.case-title h1 {
  font-size: 28px;
  font-weight: normal;
  color: #333;
}

.case-content {
  margin-bottom: 40px;
  line-height: 1.8;
  text-align: left;
}

.details {
  font-size: 16px;
  color: #333;
}

.details :deep(p) {
  margin: 15px 0;
}

.details :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 15px 0;
}

.details :deep(h1),
.details :deep(h2),
.details :deep(h3),
.details :deep(h4),
.details :deep(h5),
.details :deep(h6) {
  margin: 20px 0 10px 0;
  color: #333;
}

.details :deep(ul),
.details :deep(ol) {
  margin: 15px 0;
  padding-left: 20px;
}

.details :deep(li) {
  margin: 5px 0;
}

.details :deep(blockquote) {
  margin: 15px 0;
  padding: 10px 15px;
  border-left: 4px solid #007bff;
  background-color: rgba(240, 240, 240, 0.4);
  border-radius: 0 4px 4px 0;
}

.details :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.details :deep(th),
.details :deep(td) {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.details :deep(th) {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 加载状态样式 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading p {
  color: #666;
  font-size: 16px;
  margin: 0;
}
</style>